<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    姓: <input v-model="first"/><br/>
    名: <input v-model="last"/><br/>
    <!--   全名: <span>{{fullName()}}</span>-->
    全名: <span>{{fullNameComputedSimple}}</span>
</div>
<script type="text/javascript">
    Vue.config.printWarnings = false;
    const vm = new Vue({
        el: '#root',
        data: {
            first: '',
            last: ''
        },
        methods: {
            fullName() {
                return this.first + '-' + this.last;
            }
        },
        // 计算属性的定义
        //
        computed: {
            // 完整写法
            fullNameComputed: {
                // get()调用的时机: 当数据变化时或者第一次获取数据时
                get() {
                    return this.first + '-' + this.last;
                },
                // set()调用的时机: 当fullNameComputed被修改时
                set(newVal) {
                    let arr = newVal.split('-');
                    this.first = arr[0];
                    this.last = arr[1];
                }
            },
            //计算属性简写  只读取  不修改
            fullNameComputedSimple() {
                return this.first + '-' + this.last;
            }
        }
    });
</script>
</body>

</html>